<template>
  <div id="app">
    <el-container>
      <el-main>
        <!--路由-->
        <router-view v-if="isRouterAlive"></router-view>
      </el-main>

      <!-- 底部 -->

      <el-footer height="28vh" class="footer" v-if="this.$store.state.judge">
        <el-container>
          <!-- 左边 -->
          <el-aside class="left">
            <div id="aside_icon">
              <h2 class="el-icon-sunny">蓝天问卷网</h2>
              <!--<p>联系电话:18520412272</p>-->
              <a href="http://zlay2.cn.utools.club/">友情链接</a>
              <!--http://zlay2.cn.utools.club/-->
              <p>联系邮箱:364883894@qq.com</p>
            </div>
          </el-aside>
          <!-- 右边 -->
          <el-main class="right">
            <div id="nav">
              <li>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    产品中心
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <a href="#">制作表格</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <a href="#">制作投票</a>
                    </el-dropdown-item>
                    <el-dropdown-item>
                      <a href="#">相关链接</a>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </li>
              <li>资源中心</li>
              <li>团队</li>
              <li>联系我们</li>
            </div>
          </el-main>
        </el-container>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      // 页面刷新
      isRouterAlive: true,
      // 是否显示首页的导航栏
    };
  },
  provide() {
    return {
      // 页面更新
      reload: this.reload,
    };
  },
  methods: {
    // 页面刷新的方法
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
        console.log("我是执行了的reload...");
      });
    },
  },
  // 加载的组件
  components: {},
  created() {},
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: black;
}

/* 底部 */
a {
  color: black;
}
.el-menu-demo {
  background-image: linear-gradient(to right, white, rgba(207, 221, 236, 0.5));
}
.footer {
  background-color: lightskyblue;
  /* background-color: whitesmoke; */
  /* background-color: lightskyblue; */
  background-image: linear-gradient(to left, white, rgba(64, 158, 255, 0.5));
  border-radius: 20px 0 20px 0;
}
.footer #aside_icon {
  padding: 30px 50px 20px 20px;
  /* 方向对应的位置 上 右 下 左 */
}

.footer #aside_icon h2 {
  color: white;
}

#nav li {
  display: block;
  float: left;
  margin-left: 30px;
  font-size: 18px;
  color: black;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 18px;
}
</style>
